import React, {Component, PropTypes} from 'react';
import {observer, inject} from 'mobx-react';
import * as mobx from 'mobx';
import cloneDeep from 'lodash/cloneDeep';

import {Checkbox} from 'antd';

import ItemLevel from './ItemLevel';
import ItemDate from './ItemDate';
import ItemUser from './ItemUser';
import ItemBtns from './ItemBtns';
import ItemIcon from './ItemIcon';
import ItemContent from './ItemContent';

@inject("sysFavouriteStore")
@observer
export default class SysFavouriteItem extends Component {
    /**
     * check框状态的变更
     * @param evt
     */
    handleCheckBoxChange = (evt) => {
        const {checked, itemid} = evt.target;
        const {sysFavouriteStore} = this.props;
        sysFavouriteStore.setCheckedId(itemid, checked);
    }

    /**
     * 收藏列表每条记录的鼠标移出
     * @param itemid
     */
    handleItemMouseOut = () => {
        let {sysFavouriteStore, isover} = this.props;
        const itemid = this.props.favid;
        isover = false;
        sysFavouriteStore.setItemStatus(itemid, isover);
    }

    /**
     * 收藏列表每条记录的鼠标移入
     * @param itemid
     */
    handleItemMouseOver = () => {
        let {sysFavouriteStore, isover} = this.props;
        const itemid = this.props.favid;
        isover = true;
        sysFavouriteStore.setItemStatus(itemid, isover);
    }


    /**
     * 收藏列表每条记录的鼠标选中
     * @param itemid
     */
    handleItemClick = () => {
        const {sysFavouriteStore} = this.props;
        const itemid = this.props.favid;
        const isselected = true;
        sysFavouriteStore.setItemSelect(itemid, isselected);
    }


    renderComponent() {
        let {favid, sysFavouriteStore} = this.props;
        let {selectedIds, clickItemId} = sysFavouriteStore;

        let cls = '';

        if (favid == clickItemId) {
            cls += ' click';
        }

        let checked = false;
        selectedIds = mobx.toJS(selectedIds);
        if (selectedIds.indexOf(favid) != -1) {
            checked = true;
        }

        const data = {...this.props};
        delete data.sysFavouriteStore;

        return (
            <div
                className={`sysfav-list-item ${cls}`}
                ecId={`${this && this.props && this.props.ecId || ''}`}
                //onMouseOver={this.handleItemMouseOver}
                //onMouseOut={this.handleItemMouseOut}
                onClick={this.handleItemClick}
            >
                <div className="sysfav-list-item-info">
                    <Checkbox
                        ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@1nbmt4`}
                        className="common"
                        onChange={this.handleCheckBoxChange}
                        itemid={this.props.favid}
                        checked={checked}
                    />
                    <ItemUser {...data} ecId={`${this && this.props && this.props.ecId || ''}_ItemUser@qd35g3`}/>
                    <ItemDate {...data} ecId={`${this && this.props && this.props.ecId || ''}_ItemDate@98stjn`}/>
                    <ItemLevel
                        {...data}
                        ecId={`${this && this.props && this.props.ecId || ''}_ItemLevel@danyg2`}
                    />
                    <ItemBtns favid={data.favid}
                              ecId={`${this && this.props && this.props.ecId || ''}_ItemBtns@ump8sr`}/>
                </div>
                <div className="sysfav-list-item-content">
                    <ItemIcon {...data} ecId={`${this && this.props && this.props.ecId || ''}_ItemIcon@jcusdi`}/>
                    <ItemContent
                        {...data}
                        ecId={`${this && this.props && this.props.ecId || ''}_ItemContent@z4d9x9`}
                    />
                </div>
            </div>
        );
    }

    render() {
        return this.renderComponent();
    }
}
